<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('表单基本信息') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('表单名称')" prop="name">
        <el-input
          v-model="queryParams.name"
          :placeholder="$t('表单名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['form:base:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['form:base:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="formBaseList" border>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('表单名称')" align="center" prop="name" width="280" />
      <el-table-column :label="$t('唯一标识')" align="center" prop="uniqueKey" />
      <el-table-column :label="$t('修改人')" align="center" prop="updateBy.nickName" />
      <el-table-column :label="$t('修改时间')" align="center" prop="updateTime" />
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="250">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['form:base:edit']"
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="updateHandle(scope.row)"
          >{{ $t('修改') }}</el-button>
          <el-button
            v-hasPermi="['form:base:edit']"
            size="small"
            type="text"
            icon="el-icon-magic-stick"
            @click="releaseHandle(scope.row)"
          >{{ $t('发布') }}</el-button>
          <el-button
            v-hasPermi="['form:base:edit']"
            size="small"
            type="text"
            icon="el-icon-setting"
            @click="designHandle(scope.row)"
          >{{ $t('设计') }}</el-button>
          <el-button
            v-hasPermi="['form:base:remove']"
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandle(scope.row)"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改单基本信息对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <formBaseForm ref="formBaseForm" />
    </el-dialog>

    <!-- 发布菜单 -->
    <!-- 添加或修改菜单对话框 -->
    <el-dialog v-el-drag-dialog :title="$t('菜单')" :visible.sync="releaseOpen" width="70%" class="dataForm" :close-on-click-modal="false" :lock-scroll="false">
      <div style="height: 450px;overflow: auto;padding: 20px;margin: -20px;">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('上级菜单')">
                <treeselect v-model="form.parentId" :options="menuOptions" :show-count="true" :placeholder="$t('请选择')">
                  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                    {{ $t(node.label) }}
                    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
                  </label>
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="height: 84px">
              <el-form-item :label="$t('菜单类型')" prop="menuType">
                <el-radio-group v-model="form.menuType">
                  <el-radio label="M">{{ $t('目录') }}</el-radio>
                  <el-radio label="C">{{ $t('菜单') }}</el-radio>
                  <el-radio label="F">{{ $t('页签') }}</el-radio>
                  <el-radio label="Z">{{ $t('子页签') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单图标')">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selected" />
                  <el-input slot="reference" v-model="form.icon" :placeholder="$t('菜单图标')" readonly>
                    <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单标识')" prop="menuKey">
                <el-input v-model="form.menuKey" :placeholder="$t('菜单标识')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单名称')" prop="menuName">
                <el-input v-model="form.menuName" :placeholder="$t('菜单名称')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('显示排序')" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" :max="9999" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('组件路径')" prop="component">
                <el-input v-model="form.component" disabled :placeholder="$t('组件路径')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('权限标识')">
                <el-input v-model="form.perms" :placeholder="$t('权限标识')" :maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('是否外链')">
                <el-radio-group v-model="form.isFrame">
                  <el-radio label="0">{{ $t('是') }}</el-radio>
                  <el-radio label="1">{{ $t('否') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('菜单状态')">
                <el-radio-group v-model="form.visible">
                  <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="$t(dict.dictValue)">{{ $t(dict.dictLabel) }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!--  菜单权限 -->
            <el-col :span="24">
              <div style="margin: 10px auto;display: inline-block;width:100%;">
                <div class=" area-header">
                  <span class="area-header-title">{{ $t('菜单权限') }}</span>
                </div>
                <el-table :data="form.permissionList" border class="formTable">
                  <el-table-column :label="$t('序号')" align="center" type="index" width="50" />
                  <el-table-column :show-overflow-tooltip="true">
                    <template slot="header" slot-scope="{}">
                      <i style="color: #ff4949;margin-right: 4px;">*</i><span>{{ $t('名称') }}</span>
                    </template>
                    <template slot-scope="scope">
                      <el-form-item :prop="'permissionList.' + scope.$index + '.name'" :rules="rules.name">
                        <el-input v-model="scope.row.name" />
                      </el-form-item>

                    </template>
                  </el-table-column>
                  <el-table-column :show-overflow-tooltip="true">
                    <template slot="header" slot-scope="{}">
                      <i style="color: #ff4949;margin-right: 4px;">*</i><span>{{ $t('权限标签') }}</span>
                    </template>
                    <template slot-scope="scope">
                      <el-form-item :prop="'permissionList.' + scope.$index + '.permission'" :rules="rules.permission">
                        <el-input v-model="scope.row.permission" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('排序')" prop="sort">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.sort" controls-position="right" :precision="0" />
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('操作')" align="center" width="50" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="delPermission(scope.$index, scope.row)" />
                    </template>
                  </el-table-column>
                </el-table>

                <div class="tol">
                  <el-button type="primary" icon="el-icon-plus" size="mini" @click="AddRow">{{ $t("添加") }}</el-button>
                </div>

              </div>
            </el-col>

          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("确定") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFormBase, delFormBase, exportFormBase } from '@/api/dev/form/base/formBase'
import formBaseForm from './formBaseForm.vue'
import { saveMenu, treeselect } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
export default {
    components: {
      formBaseForm,
      Treeselect,
      IconSelect
    },
  data() {
      return {
        user: {},
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 单基本信息表格数据
          formBaseList: [],
        // 菜单树选项
        menuOptions: [],
        // 菜单状态数据字典
        visibleOptions: [],
          // 弹出层标题
          title: '表单基本信息',
          // 是否显示弹出层
          formOpen: false,
          releaseOpen: false,
          // 查询参数
          queryParams: {
              name: undefined,
              pageNum: 1,
              pageSize: 10
          },
          // 表单参数
          form: {},
        // 表单校验
        rules: {
          component: [{
            required: false,
            message: this.$t('必填信息'),
            trigger: 'blur'
          }],
          menuName: [{
            required: true,
            message: this.$t('必填信息'),
            trigger: 'blur'
          }],
          orderNum: [{
            required: true,
            message: this.$t('必填信息'),
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: this.$t('必填信息'),
            trigger: 'blur'
          }],
          permission: [{
            required: true,
            message: this.$t('必填信息'),
            trigger: 'blur'
          }]
        }
      }
  },
  created() {
      this.getList()
    this.getDicts('sys_show_hide').then(response => {
      this.visibleOptions = response.data
    })
  },
  mounted() {
  },
  methods: {
    /** 查询单基本信息列表 */
    getList() {
        this.loading = true
        listFormBase(this.queryParams).then(response => {
            this.formBaseList = response.rows
            this.total = response.total
            this.loading = false
        })
    },

    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            name: undefined,
            uniqueKey: undefined,
            html: undefined,
            js: undefined,
            css: undefined,
            canvasStyle: undefined,
            magicalJsCodeData: undefined,
            delFlag: undefined,
            createBy: undefined,
            updateBy: undefined,
            createTime: undefined,
            updateTime: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.$nextTick(() => {
            this.$refs.formBaseForm.init(null)
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.formBaseForm.init(row)
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delFormBase(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    /** 导出按钮操作 */
    exportHandle() {
        const queryParams = this.queryParams
        this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return exportFormBase(queryParams)
        }).then(response => {
            this.download(response.msg)
        }).catch(function() {
        })
    },
    releaseHandle(row) {
      this.releaseOpen = true
      this.form = {
        menuId: undefined,
        menuKey: row.uniqueKey,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: 'C',
        orderNum: undefined,
        isFrame: '1',
        visible: '0',
        permissionList: []

      }
      this.form.component = 'dev/form/base/list?formId=' + row.id
      this.getTreeselect()
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.menuOptions = []
        const menu = {
          id: 0,
          label: this.$t('主类目'),
          children: []
        }
        menu.children = response.data
        this.menuOptions.push(menu)
      })
    },
    // 删除行
    delPermission(index) {
      this.form.permissionList.splice(index, 1)
    },
    AddRow() {
      const row = {
        name: '',
        permission: '',
        sort: this.form.permissionList.length + 1
      }
      if (this.form.component) {
        switch (this.form.permissionList.length) {
          case 0:
            row.name = '编辑'
            row.permission = this.form.component.split('/')[0] + ':' + this.form.component.split('/')[1] + ':edit'
            break
          case 1:
            row.name = '删除'
            row.permission = this.form.component.split('/')[0] + ':' + this.form.component.split('/')[1] + ':remove'
            break
          case 2:
            row.name = '导出'
            row.permission = this.form.component.split('/')[0] + ':' + this.form.component.split('/')[1] + ':export'
            break
        }
      }
      this.form.permissionList.push(row)
    },
    // 取消按钮
    cancel() {
      this.releaseOpen = false
      this.form = {}
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.scene = '0'
          saveMenu(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('发布成功'))
              this.cancel()
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          })
        }
      })
    },
    // 选择图标
    selected(name) {
      this.form.icon = name
    },
    designHandle(row) {
      const router = this.$router.resolve({ path: '/system/dragForm/form?formId=' + row.id })
      window.open(router.href, '_blank')
    }
  }
}
</script>
